<template>
    <div class="container">
      <img src="http://file.rzkeji.com/web/loveciy/img/banner-2.jpg" class="titleImg"/>
      <img src="http://file.rzkeji.com/web/loveciy/img/custom-way.jpg" class="processImg" />
      <div class="desgin">
        <div class="design_title">
          <span><img src="http://file.rzkeji.com/web/loveciy/img/design.png" class="designImg"/>自定义定制</span>
          <span class="designMore">MORE></span>
        </div>
        <img src="http://file.rzkeji.com/web/loveciy/img/custom-banner.jpg" class="designContent"/>
      </div>
      <inda :motto="designImg"></inda>
      <img src="http://file.rzkeji.com/web/loveciy/img/article-banner.jpg" class="articleImg"/>
      <div class="design_title">
          <span><img src="http://file.rzkeji.com/web/loveciy/img/show.png" class="designImg"/>SHOW</span>
          <span class="designMore">MORE></span>
      </div>
      <inda :motto="showImg"></inda>
      <div class="design_title">
          <span><img src="http://file.rzkeji.com/web/loveciy/img/rocket.png" class="designImg"/>脑洞计划</span>
          <span class="designMore">MORE></span>
      </div>
      <img src="http://file.rzkeji.com/web/loveciy/img/planBanner.jpg" class="planBanner"/>
      <inda :motto="planImg"></inda>

      <div class="planGo">
        <img src="http://file.rzkeji.com/web/loveciy/img/planBanner2.jpg" class="planBanner2"/>
      </div>
      <img src="http://file.rzkeji.com/web/loveciy/img/footer.jpg" class="footer"/>
    </div>
</template>

<script>
import inda from '@/components/swiper'
export default {
  data () {
    return {
      designImg:[
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"【乐自造定制】T恤",
          content2:"立即定制",
          //设置img的样式，因为在首页的swiper照片的大小不一样，为了套用一个模板所以需要传数据进去
           imgStyle:{
            width:'110px',   
            height:'100px'
          }
        },
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"【乐自造定制】T恤",
          content2:"立即定制",
           imgStyle:{
            width:'110px',   
            height:'100px'
          }
        },
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"【乐自造定制】T恤",
          content2:"立即定制",
           imgStyle:{
            width:'110px',   
            height:'100px'
          }
        },
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"【乐自造定制】T恤",
          content2:"立即定制",
           imgStyle:{
            width:'110px',  
            height:'100px'
          }
        },
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"【乐自造定制】T恤",
          content2:"立即定制",
          imgStyle:{
            width:'110px',   
            height:'100px'
          }
        },
      ],
      showImg:[
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"",
          content2:"",
          imgStyle:{
            width:'172.5px',   
            height:'140px'
          }
        },
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"",
          content2:"",
          imgStyle:{
            width:'172.5px',
            height:'140px'
          }
        },
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"",
          content2:"",
          imgStyle:{
            width:'172.5px',
            height:'140px'
          }
        },
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"",
          content2:"",
          imgStyle:{
            width:'172.5px',
            height:'140px'
          }
        },
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"",
          content2:"",
          imgStyle:{
            width:'172.5px',
            height:'140px'
          }
        },
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"",
          content2:"",
          imgStyle:{
            width:'172.5px',
            height:'140px'
          }
        },
      ],
      planImg:[
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"【乐自造】中山大学",
          content2:"6月28日发售",
           imgStyle:{
            width:'110px',   
            height:'100px'
          }
        },
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"【乐自造】中山大学",
          content2:"6月28日发售",
           imgStyle:{
            width:'110px',   
            height:'100px'
          }
        },
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"【乐自造】中山大学",
          content2:"6月28日发售",
           imgStyle:{
            width:'110px',  
            height:'100px'
          }
        },
        {
          imgSrc:'http://file.rzkeji.com/web/loveciy/img/black1.jpg',
          content1:"【乐自造】中山大学",
          content2:"6月28日发售",
           imgStyle:{
            width:'110px',   
            height:'100px'
          }
        },
      ]
    }
  },

  components: {
    inda
  },

  methods: {

  },

  onShow () {
    
  }
}
</script>

<style scoped>
.container{width: 100%;height: 100%;background: white;}
.titleImg{width: 100%;height: 227px;display: block;}
.processImg{width: 100%;height: 166px;display: block;margin-top: 15px;}
.desgin{width: 100%;height: 236px;}
.design_title{width: 100%;height: 70px;background: white;line-height: 70px;}
.design_title span:nth-of-type(1){font-size: 20px;font-weight: 500;}
.design_title span:nth-of-type(2){font-size: 17px;float: right;margin-right: 10px;}
.designImg{width: 27px;height:27px;vertical-align:middle;margin-right:10px;}
.designContent{width: 100%;height: 166px;}
.articleImg{width: 100%;height:166px;margin-top: 10px;}
.planBanner{width: 100%;height:166px; }
.planGo{width: 100%;height: 200px;background: gray}
.planBanner2{width: 325px;height: 140px;margin:25px 20px 35px 25px;}
.footer{width: 100%;height: 36px;}
</style>
